<template>
  <div>
    {{dataArray.spiderForm.title}}
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="任务名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="采集入口网址">
        <el-input v-model="form.website" placeholder="请符合url格式,如http://www.baidu.com"></el-input>
      </el-form-item>
      <!--<el-form-item label="默认过滤字段">-->
        <!--<el-col :span="11">-->
        <!--<el-input v-model="form.xpath.expression"></el-input>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item :label="'字段' + (index + 1)" v-for="(xpath, index) in form.xpath" :key="xpath.key" style="margin-bottom: 10px">
        <el-col :span="11">
          <el-input  v-if='index != 0' v-model="xpath.name" placeholder="字段名"></el-input>
        </el-col>
        <el-col :span="11">
          <el-input v-model="xpath.expression" placeholder="XPATH表达式"></el-input>
        </el-col>
        <el-col :span="11" :offset="1">
          <span v-if='index == 0' style="font-size: 15px; color: crimson">* 第一个过滤条件，不能为空</span>
        </el-col>
        <el-button v-if='index != 0' @click.prevent="removeDomain(xpath)">删除</el-button>
      </el-form-item>
      <el-button style="margin-bottom: 20px" @click="addDomain">新增字段</el-button>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {createTasks} from '../apis/api'
  export default {
    data () {
      return {
        dataArray: this.$store.state,
        form: {
          name: '',
          website: '',
          xpath: [{
            name: 'first',
            expression: '//a'
          }],
          desc: ''
        }
        // endpointDB: this.$store.state.endpointDB
      }
    },
    methods: {
      onSubmit () {
        let _this = this
        let xpaths = {}
        _this.form.xpath.forEach(function (value) {
          xpaths[value.name] = value.expression
        })
        xpaths = JSON.stringify(xpaths)
        let tasksData = {
          name: _this.form.name,
          type_spider: '普通爬虫',
          type_template: '精确建库',
          type_business: '单网页采集',
          proxy: '无',
          website: JSON.stringify([_this.form.website]),
          xpath: xpaths,
          desc: _this.form.desc
        }
        createTasks(tasksData).then(response => { // {emulateJSON: true} 这个可能导致提交的数据出现问题 多一层
          _this.$message({
            message: '创建成功',
            type: 'success'
          })
          _this.$store.dispatch('deleteTab', '1-6-1')
        }).catch(error => {
          console.log(error)
        })
      },
      addDomain () {
        let _this = this
        _this.form.xpath.push({
          name: '',
          expression: ''
        })
      },
      removeDomain (item) {
        let _this = this
        let index = _this.form.xpath.indexOf(item)
        if (index !== -1) {
          _this.form.xpath.splice(index, 1)
        }
      }
    }
  }
</script>
